<template>
	<div class="list">
		<!-- 工具条 -->
		<el-col :span="24" class="toolbar">
			<el-date-picker
				v-model="filters.time"
				type="datetimerange"
				:picker-options="pickerOptions"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				value-format="yyyy-MM-dd hh:mm:ss"
				@change="getTableData"
			>
			</el-date-picker>
			<!-- <el-select v-model="filters.product_type" clearable placeholder="作品类型" @change="getTableData">
				<el-option label="文字" :value="1"></el-option>
				<el-option label="视频" :value="2"></el-option>
				<el-option label="图片" :value="3"></el-option>
				<el-option label="音乐" :value="4"></el-option>
			</el-select> -->
			<el-input placeholder="请输入内容" v-model="filters.name" class="search">
				<el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
			</el-input>
		</el-col>
		<el-table :data="tableData" v-loading="listLoading" stripe @selection-change="selsChange" style="width: 100%">
			<!-- <el-table-column type="selection" width="55">
			</el-table-column> -->
			<el-table-column prop="requires_id" label="ID" width="50"></el-table-column>
			<el-table-column prop="o_id" label="订单号"></el-table-column>
			<el-table-column prop="add_time" label="订单生成时间"></el-table-column>
			<el-table-column prop="product_name" label="监测作品名称"></el-table-column>
			<el-table-column prop="product_type_zh" label="作品类型"></el-table-column>
			<el-table-column prop="period_name" label="监测周期"></el-table-column>
			<el-table-column prop="status_zh" label="订单状态"></el-table-column>
			<el-table-column prop="invoice_zh" label="发票信息">
				<template slot-scope="scope">
					<div v-if="scope.row.invoice_status == 2 || scope.row.invoice_status == 3">
						<span class="hover" @click="invoiceShow(scope.$index, scope.row)">查看</span>
					</div>
				</template>	
			</el-table-column>
			<el-table-column prop="invoice_zh" label="发票状态">
				<template slot-scope="scope">
					<div v-if="scope.row.invoice_status == 2">
						<span class="hover" @click="invoiceMailing(scope.$index, scope.row)">邮寄</span>
					</div>
					<div v-else>
						{{scope.row.invoice_zh}}
					</div>
				</template>	
			</el-table-column>
			<el-table-column label="报告状态">
				<template slot-scope="scope">
					<div v-if="scope.row.status == 4 && scope.row.down_report == 0">
						<el-upload
							:action="reportUpload"
							:data="{ uid: crocUser.uid, requires_id: scope.row.requires_id }"
							:show-file-list="false"
							:on-success="(res,file) => handleReportSuccess(res,file, scope.$index, scope.row)"
  							:before-upload="(file) => beforeReportUpload(file, scope.row)">
							<el-button size="mini" type="primary">点击修改</el-button>
						</el-upload>
					</div>
					<div v-else-if="scope.row.status == 4 && scope.row.down_report != 0">
						<el-upload
							:action="reportUpload"
							:data="{ uid: crocUser.uid, requires_id: scope.row.requires_id }"
							:show-file-list="false"
							:on-success="(res,file) => handleReportSuccess(res,file, scope.$index, scope.row)"
  							:before-upload="(file) => beforeReportUpload(file, scope.row)">
							<el-button size="mini" type="primary">点击上传</el-button>
						</el-upload>
					</div>
					<div v-else>
						监测未完成
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 工具条 -->
		<el-col :span="24" class="toolbar" style="padding-top:10px">
			<!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量密码重置</el-button> -->
			<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<!-- 发票信息 -->
		<el-dialog title="发票信息" :visible.sync="invoiceFormVisible" width="500px" class="invoiceForm">
			<el-form ref="invoiceForm" :model="invoiceForm" label-width="110px">
				<el-form-item label="发票类型">
					{{ invoiceForm.invoice_type==1?'增值税普通发票':'增值税专用发票' }}
				</el-form-item>
				<el-form-item label="发票抬头">
					{{ invoiceForm.title_type==1?'个人':'企业' }}
				</el-form-item>
				<el-form-item label="发票抬头名称">
					{{ invoiceForm.title }}
				</el-form-item>
				<el-form-item label="邮寄地址">
					{{ invoiceForm.address }}
				</el-form-item>
				<el-form-item label="联系人">
					{{ invoiceForm.consignee }}
				</el-form-item>
				<el-form-item label="联系人手机号">
					{{ invoiceForm.mobile }}
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import { requiresGetorderlist,requiresEdit,requiresUploadreport,requiresGetinvoiceinfo } from '@/api';

	export default {
		data() {
			return {
				reportUpload: requiresUploadreport,
				// 翻页
				total: 0,
				page: 1,
				listLoading: false,
				sels: [],
				
				//以上是自己测试
				filters: {
					time: [],
					name: '',
					product_type: '',
				},

				// 表格
				tableData: [],
				invoiceForm: {
					invoice_type: 1,
					title_type: 1,
					title: '',
					consignee: '',
					mobile: '',
					address: '',
				},
				invoiceFormVisible: false,
				
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
						}
					}]
				},

			}
		},
		mounted() {
			this.getTableData();
		},
		computed: {
			...mapState([
				'crocUser',
			]),
		},
		methods: {
			...mapMutations([
				'OUT_LOGIN',
			]),
			selsChange: function (sels) {
				this.sels = sels;
			},
			// 翻页 
			handleCurrentChange(val) {
				this.page = val;
				this.getTableData();
			},
			getTableData(){
				this.listLoading = true;
				let para = {
					stime: this.filters.time?this.filters.time[0]:'',
					etime: this.filters.time?this.filters.time[1]:'',
					name: this.filters.name,
					product_type: this.filters.product_type,
					uid: this.crocUser.uid,
					page: this.page,
					pagesize: 10,
				};

				requiresGetorderlist(para).then(res => {
					this.listLoading = false;
					if (res.data) {
						this.total = res.total;
						this.tableData = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},
			invoiceShow(index,row){
				this.invoiceFormVisible = true;
				let para = {
					uid: this.crocUser.uid,
					requires_id: row.requires_id,
				};
				requiresGetinvoiceinfo(para).then(res=>{
					if (res.data) {
						this.invoiceForm = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				})
				
			},
			// 发票邮寄
			invoiceMailing(index,row) {
				let para = {
					uid: this.crocUser.uid,
					requires_id: row.requires_id,
					invoice_status: 3
				};
				requiresEdit(para).then(res=>{
					if (res.data) {
						this.$message.success(res.msg);
						this.getTableData();
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				})
			},
			// 上传监测报告
			handleReportSuccess(res_pic, file, index, row) {
				if(res_pic.data){
					let para = {
						uid: this.crocUser.uid,
						requires_id: row.requires_id,
						report_url: res_pic.data
					}
					requiresEdit(para).then(res=>{
						if (res.data) {
							this.$message.success(res.msg);
							this.getTableData();
							this.tableData[index].down_report = 3;
						}else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
					})
				}else {
					this.$message.error(res_pic.msg);
				}
			},
			beforeReportUpload(file, row) {
				const isType = file.type === 'application/msword' || file.type === 'application/pdf' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
				const isLt2M = file.size / 1024 / 1024 < 10;
				if (!isType) {
					this.$message.error('只能上传 word/pdf 文件!');
				}
				if (!isLt2M) {
					this.$message.error('上传文件大小不能超过 10MB!');
				}
				return isType && isLt2M;
			},
		}
	}

</script>

<style scoped lang="scss">
.invoiceForm .el-form-item {
	margin-bottom: 0;
}
</style>